<template>
  <van-space
    direction="vertical"
    :size="20"
    fill
  >
    <view class="app-tabs__container">
      <van-radio-group v-model="current">
        <van-radio
          v-for="item in list"
          :key="item.value"
          :name="item.value"
        >
          <van-swipe-cell>
            <van-cell>
              <van-field
                v-model="item.label"
                :border="false"
                label="文本"
                input-align="right"
              />
              <van-divider />
              <van-field
                v-model="item.value"
                :border="false"
                label="唯一id"
                input-align="right"
              />
            </van-cell>
            <template #right>
              <van-button
                square
                text="删除"
                @click="handleDeleteTab(item.value)"
              />
            </template>
          </van-swipe-cell>
        </van-radio>
      </van-radio-group>
    </view>
    <van-button
      round
      @click="handleAddTab"
    >
      <van-icon name="plus" />
      增加Tab
    </van-button>
    <van-divider>示例</van-divider>
    <AppSwitch
      :data="list"
      v-model:current="current"
    />
  </van-space>
</template>

<script setup lang="ts">
import type {
  TaskSwitchList,
  TaskSwitchVal
} from '@/components/AppSwitch/types'

const list = ref<TaskSwitchList[]>([
  { label: '标签1', value: 'tag1' },
  { label: '标签2', value: 'tag2' },
  { label: '标签3', value: 'tag3' }
])
const current = ref<TaskSwitchVal>('tag1')

const handleAddTab = () => {
  const data = { label: '', value: '' }
  list.value.push(data)
}

const handleDeleteTab = (value: TaskSwitchVal) => {
  const index = list.value.findIndex(item => item.value === value)
  if (index !== -1) list.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
:deep(.van-space) {
  padding: 24rpx;
  box-sizing: border-box;
  .van-cell {
    background-color: $cell-bg-color;
    &::after {
      display: none;
    }
    .van-cell__title {
      color: $uni-text-color-base;
    }
    .van-field__control {
      color: $uni-text-color-base;
    }
  }
  .van-swipe-cell {
    margin-bottom: $uni-spacing-col-base;
    border-radius: $uni-border-radius-base;
    .van-swipe-cell__right {
      .van-button {
        height: 100%;
        background-color: #ee0a24;
        color: $uni-text-color-base;
      }
    }
  }
  .van-button {
    width: 100%;
    border: none;
    background-color: $cell-bg-color;
    color: $uni-text-color-base;
  }
}
.app-tabs__container {
  max-height: 50vh;
  overflow-y: auto;
}
</style>
